<template>
  <div class="homem">
      
      <van-swipe class="my-swipe"   :autoplay="3000" indicator-color="white">
                <van-swipe-item><router-link to="/details"><img src="home1.jpg" alt=""></router-link></van-swipe-item>
                <van-swipe-item><router-link to="/details"><img src="home2.jpg" alt=""></router-link></van-swipe-item>
                <van-swipe-item><router-link to="/details"><img src="home3.jpg" alt=""></router-link></van-swipe-item>
                <van-swipe-item><router-link to="/details"><img src="home4.jpg" alt=""></router-link></van-swipe-item>
                
        </van-swipe>
        <div class="ho2">
            <img src="home6.jpg" alt="">
        </div>
        <div class="maodian">
            <img src="maodian.jpg" alt="">
            <div id="mao1" class="maodian1"></div>
            <div class="maolinkul">
                <a href="#mao1"><img src="" alt=""></a>
                <a href="#mao2"></a>
                <a href="#mao3"></a>
                <a href="#mao4"></a>
                <a href="#mao5"></a>
            </div>
            <div>
                <a target="_blank" href="#">
                    <img src="home2.jpg" alt="">
                </a>
            </div>
            <div>
                <a target="_blank" href="#">
                    <img src="home3.jpg" alt="">
                </a>
            </div>
            <div>
                <a target="_blank" href="#">
                    <img src="home4.jpg" alt="">
                </a>
            </div>
            <div>
                <a target="_blank" href="#">
                    <img src="home5.jpg" alt="">
                </a>
            </div>
            <div>
                <a target="_blank" href="#">
                    <img src="home6.jpg" alt="">
                </a>
            </div>
            <div>
                <a target="_blank" href="#">
                    <img src="home7.jpg" alt="">
                </a>
            </div>

            <div>
                <a target="_blank" href="#">
                    <img src="home8.jpg" alt="">
                </a>
            </div><div>
                <a target="_blank" href="#">
                    <img src="home9.jpg" alt="">
                </a>
            </div>
            <div>
                <a target="_blank" href="#">
                    <img src="home10.jpg" alt="">
                </a>
            </div>
            <div>
                <a target="_blank" href="#">
                    <img src="home11.jpg" alt="">
                </a>
            </div>
            <div>
                <a target="_blank" href="#">
                    <img src="home12.jpg" alt="">
                </a>
            </div>
            <div>
                <a target="_blank" href="#">
                    <img src="home13.jpg" alt="">
                </a>
            </div>
            <div>
                <a target="_blank" href="#">
                    <img src="home14.jpg" alt="">
                </a>
            </div>
            <div>
                <a target="_blank" href="#">
                    <img src="home15.jpg" alt="">
                </a>
            </div>
            
        </div>

  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
.homem{
    padding-bottom:0.5rem;
}
    .my-swipe .van-swipe-item {
    color: pink;
    font-size: 20px;
    text-align: center;
    margin-top:0.5rem;
  }
  .my-swipe img{
      width:100%;
      height:4rem;
      vertical-align: middle;
 }
 .ho2 img{
     width:100%;
     height:3rem;
 }
 .maodian{
    position: relative;
 }
 .maodian img{
    width: 100%;
    border: 0 none;
    display: block;
 }
 .maodian1{
    position: absolute;
    width: 100%;
    height: 0px;
    left: 0;
    top: -75px;
 }
 .maolinkul{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0%;
    z-index: 10;
 }
 .maolinkul a{
    width: 20%;
    height: 100%;
    float: left;
    display: block;
 }
 .maodian>div{
     position: relative;
 }
 .maodian a{
     text-decoration: none;
    outline: 0 none;
    display: block;
 }
 .maodian img{
     width: 100%;
    border: 0 none;
    display: block
 }
 
</style>